import { useRoute } from "vue-router";
import type { Router } from "vue-router";
import { Store, useStore } from "vuex";
import type { RootState } from "@/store/types";
import type { TabStatus, TabCache } from "@/store/modules/tab";
import { computed, reactive, onMounted, ref, nextTick } from "vue";
import type { Employee } from "@/store/modules/auth";
import request from "@/public/request";
import type { MenuButton, MenuTree } from "@/types/menu";
import { getFirstMenu } from "@/components/MenuItemTree";



/**
 * 查找子级菜单路径
 */
function findChildExist(menu: MenuTree, path: string): boolean {
  if (menu.path.toLowerCase() == path.toLowerCase()) {
    return true;
  }
  for (let child of menu.children) {
    let res = findChildExist(child, path);
    if (res) {
      return true;
    }
  }
  return false;
}
function findChildMenu(menu: MenuTree, path: string):any {
  let arr = ref<MenuTree>();
  if (menu.path.toLowerCase() == path.toLowerCase()) {
    arr.value = menu;
  }
  for (let child of menu.children) {
    let res = findChildExist(child, path);
    if (res) {
      arr.value = child;
    }
  }
  return arr.value
}

type goToRoute = (tab: TabCache) => Promise<any>;


const EXTERNAL_MENU = "EXTERNAL_MENU"


/**
 * 主菜单
 */
function mainMenuRef(router: Router, gotoRoute: goToRoute) {
  
  const route = useRoute();
  const store = useStore();
  // 菜单显示
  const drawerShow = ref(false);
  // 菜单树
  const menuTree = ref<Array<MenuTree>>([]);
  // 获得菜单树
  async function getMenuTree() {


    let res = await store.dispatch("menu/getCurrentEmployeeMenuTree");

    menuTree.value = res;
  }
  onMounted(async () => {
    await getMenuTree();

    if (route.fullPath.toLowerCase() == "/internal") {
      // 如果当前是/internal的话 前往菜单的第一个
      if (store.state.tab.tabs.length != 0) {
        const firstTab = store.state.tab.tabs[0];
        gotoRoute(firstTab);
      } else {
        for (let menu of menuTree.value) {
          let first = getFirstMenu(menu);
          if (first) {
            gotoRoute({
              title: first.title,
              route: first.path,
            });
            return;
          }
        }
        console.error("未找到菜单!");
      }
    }


  });

  // 显示右侧菜单
  const showRightMenu = ref(false);

  const childrenMenu = ref<MenuTree | null>(null);
  // 显示页面内子菜单
  const showChildrenMenu = computed(() => {
    // 左侧没菜单的时候不显示
    if (childrenMenu.value == null) {
      return false;
    } else {
      return childrenMenu.value.children.length != 0;
    }
  });

  function openChildrenMenu(menu: MenuTree) {
    childrenMenu.value = menu;
    // 关闭抽屉菜单
    drawerShow.value = false;
    // 找到
  }
  const currentActive = computed(() => {
    //default-active
    let exist = false;
    for (let menu of menuTree.value) {
      let res = findChildExist(menu, route.path);
      let childmenu = findChildMenu(menu, route.path);

      if (res) {
        openChildrenMenu(childmenu);
        exist = true;
        break;
      }
    }

    return route.path;
  });

  /**
   * 打开菜单
   */
  function openMenu(menu: MenuTree) {
    if (menu.children.length != 0) {
      // 有子菜单
      openChildrenMenu(menu);
    } else {
      // 没有子菜单
      gotoRoute({
        title: menu.title,
        route: menu.path,
      });
    }
  }

  // 菜单树 node点击
  function treeNodeClick(node: MenuTree) {
    if (node.children.length == 0) {
      openMenu(node);
      drawerShow.value = false;
    }
  }


  const drawerRef = ref<any>(null)
  const internalHeaderStyle = ref('');
  function openDrawer() {
    drawerShow.value = true;
    nextTick(() => {
      if (drawerRef.value) {
        internalHeaderStyle.value = 'z-index:' + (parseInt(drawerRef.value.zIndex) + 1);
      }
    })
  }

  return reactive({
    drawerShow,
    menuTree,
    showRightMenu,
    openMenu,
    showChildrenMenu,
    childrenMenu,
    treeNodeClick,
    currentActive,
    openDrawer,
    drawerRef,
    internalHeaderStyle
  });
}

export default mainMenuRef;
